<template>
  <div>
    <a-modal :closable="false" :mask-closable="false" :visible="visible" :footer="null" title="导入结果" @ok="handleOk" @cancel="cancel">
      <a-result v-if="success" status="success" title="全部上传成功" />
      <a-result
        v-else
        status="warning"
        :sub-title="`共导入${allList}条数据,其中导入了${successList}条数据,失败了${faildList}条数据,请导出错误数据,修改后重新导入`"
      />
      <a-row type="flex" justify="end">
        <a-button v-if="!success" class="mg_r12" @click="handleOk(1)">
          查看错误数据
        </a-button>
        <a-button type="primary" @click="handleOk(2)">知道了</a-button>
      </a-row>
    </a-modal>
    <a-modal title="错误详情" :visible="visibleWrong" :footer="null" @cancel="visibleWrong = false">
      <div class="content">
        <a-row v-for="(item, i) in wrongList" :key="i" class="item">
          {{ item.reason }}
        </a-row>
      </div>
      <a-row />
    </a-modal>
  </div>
</template>

<script>
export default {
  name: "ExcelBack",

  props: {
    visible: {
      type: Boolean,
      default: false
    },
    options: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      visibleWrong: false,
      wrongList: []
    };
  },
  computed: {
    allList() {
      return this.options.importFailList.length + this.options.importSucList.length;
    },
    successList() {
      return this.options.importSucList.length;
    },
    faildList() {
      return this.options.importFailList.length;
    },
    success() {
      return !this.options.importFailList.length;
    }
  },

  methods: {
    // 确认
    handleOk(type) {
      if (type === 1) {
        this.visibleWrong = true;
        this.wrongList = this.options.importFailList;
        this.$emit("change", { visibleWrong: true, ...this.options });
      } else {
        this.$emit("change", { visible: false, ...this.options });
      }
    },
    // 导出错误模板
    cancel() {
      this.$emit("change", { visible: false, ...this.options });
    }
  }
};
</script>
<style lang="scss" scoped>
.content {
  height: 500px;
  overflow: auto;
  .item {
    padding: 12px 0;
  }
}
</style>
